<template>
    <div>
        <ElDialog v-model="visible" destroy-on-close :close-on-click-modal="closeOnClick" :title="title" :width="width">
            <slot></slot>
            <template #footer>
                <ElButton @click="visible = false">取消</ElButton>
                <ElButton type="primary" :loading="loading" @click="$emit('ok')">确定</ElButton>
            </template>
        </ElDialog>
    </div>
</template>
<script lang="ts">
export default {
    name: 'Dialog'
}
</script>
<script lang="ts" setup>
import { ref } from 'vue';

defineProps({
    /**
     * 标题
     */
    title: {
        type: String,
        required: true
    },
    /**
     * 宽度
     */
    width: {
        type: [Number, String],
        default: 700
    },
    /**
     * 点击遮罩关闭
     */
    closeOnClick: {
        type: Boolean,
        default: false
    }
});

defineEmits(['ok']);

defineExpose({
    show() {
        visible.value = true;
    },
    hide() {
        visible.value = false;
    },
    start() {
        loading.value = true;
    },
    stop() {
        loading.value = false;
    }
});

/**
 * 显示隐藏
 */
const visible = ref(false);
/**
 * loading
 */
const loading = ref(false);
</script>

<style></style>
